<template>
  <div>
    <div>
      <el-button @click="openEdit(true)">新增</el-button>
      <AForm ref="AForm"
             v-model:show="isShowForm"
             :formConfig="formConfig"
             :init-form="currentFormDate"
             :upd-fun="testUpd"
             :add-fun="testAdd"
             @ok="formSuccess"
      >
      </AForm>
      <div>
        <ul>
          <li v-for="(item,index) in datas" :key="index">
            <div class="item-table">
              <div>{{ item.name }}</div>
              <div>{{ item.version }}</div>
              <div>{{ item.isNew?true:false }}</div>
              <div>
                <span @click="openEdit(true,item)">修改</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div>
      <p>状态显示</p>
      <p>
        <span>表单状态isShowForm: </span>
        <span>{{ isShowForm }}</span>
      </p>
    </div>
  </div>
</template>

<script>
import AForm from './AForm'
import uuid from '../utils/uuid'
export default {
  name : 'APanel' ,
  components : { AForm },
  data(){
    return {
      isShowForm:false,
      currentFormDate:undefined,
      formConfig:{
        name:{
          label:'名称',
          rules:[{required: true,message: '请填写活动形式'}],
          componentName:'el-input',
        },
        version:{
          label:'版本',
          rules:[{required:true,message:'版本必须填写'}],
          componentName:'el-input',
        },
        isNew:{
          label:'是否最新',
          componentName:'el-switch',
        }
      },
      datas:[
        {
          id:1,
          name:'java',
          version:'8',
        },
        {
          id:2,
          name:'java',
          version:'9',
        },
        {
          id:3,
          name:'java',
          version:'11',
        },
        {
          id:4,
          name:'spring',
          version:'3.x',
          isNew:true
        }
      ],
      loading:false
    }
  },
  methods:{
    formSuccess(){
      this.openEdit(false)
      //todo 调用列表接口，刷新列表
    },
    openEdit(state,data){
      this.isShowForm=state
      this.currentFormDate=data
    },
    testAdd(newData){
      let _this=this
      return new Promise((resolve, reject)=>{
        setTimeout(()=>{
          newData.id=uuid.uuid()
          _this.datas.push(newData)
          resolve('成功')
        },1000)
      })
    },
    testUpd(newData){
      let _this=this
      return new Promise((resolve, reject)=>{
        setTimeout(()=>{
          _this.datas.filter(d=>d.id===newData.id).forEach(e=>e=newData)
          resolve('成功')
        },1000)
      })
    },
    log(name,value){
      console.log(name,value)
    }
  }
}
</script>

<style scoped>
.item-table{
  display: flex;
  gap: 10px;
}
.item-table div{
  width: 100px;
}
.item-table div span{
  color: blue;
  cursor:pointer;
}
</style>